import { RouterData } from './router'

import './App.css'
import {useEffect,useState} from 'react'
function App() {
  const [myData, setMyData] = useState(localStorage.getItem('loading'));
  useEffect(()=>{
    
    const handleStorageChange = (event:StorageEvent) => {
      console.log(event);
      
      if (event.key === 'loading') {
        console.log(event.key);
        
        setMyData(event.newValue);
      }
    };
    // 给widnow添加事件监听localStorage
    window.addEventListener('storage', handleStorageChange);

    return () => {
      // 组件销毁取消监听
      window.removeEventListener('storage', handleStorageChange);
    };
    
  },[])
  return (
    <div className='app' >
       {myData == 'true' &&<div className="loading">
        <div className="loading-box">
          <div className="loading-balls">
            <div className="loading-ball ball1"></div>
            <div className="loading-ball ball2"></div>
            <div className="loading-ball ball3"></div>
            <div className="loading-ball ball4"></div>
          </div>
          <div className="loading-text">正在加载中，请稍候...</div>
        </div>
      </div>
}
      <RouterData />

    </div >
  )
}

export default App
